<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="工具箱" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolboxId">

              <a-select v-model="model.toolboxId" ref="toolboxId" @change="getToolboxValue">
                <a-select-option v-for="val in toolboxValue" :key="val.id" :value="val.id">
                  {{val.str1}}
                </a-select-option>
              </a-select>

            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="工具" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="toolAdminId">
<!--              <a-input v-model="model.toolboxName" placeholder="请输入工具id"  ></a-input>-->
<!--              <a-select  v-model="model.toolName">-->
<!--                <a-select-option v-for="(val , key) in toolValue" :key="key"  v-model="val.toolName" :value="val.toolAdminId">-->
<!--                  {{val.toolName}}-->
<!--                </a-select-option>-->
<!--              </a-select>-->
              <a-select style="width: 100%;margin-top: 20px" v-model="model.toolAdminId" ref="toolAdminId" @change="getToolValue">
                <a-select-option  v-for="val in toolValue" :key="val.id" :value="val.toolNum">
                  {{val.toolNum}}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'

  export default {
    name: 'ToolToolboxForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        toolboxValue:{},
        toolValue:{},
        model:{
         },
        modelValue:{},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          // toolboxId: [
          //   { required: true, message: '请输入工具箱id!'},
          // ],
          // toolAdminId: [
          //   { required: true, message: '请输入工具id!'},
          // ],
        },
        url: {
          add: "/tooltoolbox/toolToolbox/add",
          edit: "/tooltoolbox/toolToolbox/edit",
          queryById: "/tooltoolbox/toolToolbox/queryById"
        }
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
    },
    mounted() {
      this.getToolToolbox();
    },
    methods: {
      //初始化页面调用接口
      getToolToolbox(){
        getAction('/tooladmin/toolAdmin/listAll',null).then(res =>{
          //console.log("res"+res)
          console.log(res.result.records)
          this.toolValue = res.result;
        }).catch(res => {
          console.log("error:" + res)
        })
        getAction('/toolbox/toolbox/list',null).then(res =>{
          console.log("工具箱")
          console.log(res)
          this.toolboxValue = res.result.records;

        }).catch(res => {
          console.log("error:" + res)
        })
      },
      //下拉框事件
      getToolboxValue(value){
        this.modelValue.toolboxId = value;
        console.log("value"+value)
      },
      getToolValue(value){
        this.modelValue.toolAdminId = value;
        console.log("value"+value)
      },
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      //表单提交事件
      submitForm () {
        var toolboxId = this.$refs.toolboxId.value;
        var toolAdminId = this.$refs.toolAdminId.value;
        console.log(toolboxId + "---" + toolAdminId)
        if (this.$refs.toolboxId.value != null && this.$refs.toolboxId.value != " " && this.$refs.toolAdminId.value != null && this.$refs.toolAdminId.value != " "){
          let httpurl = '';
          let method = '';
          if(!this.model.id){
            httpurl+=this.url.add;
            method = 'post';
          }else{
            httpurl+=this.url.edit;
             method = 'put';
             this.modelValue.toolAdminId = this.model.toolAdminId;
            this.modelValue.toolboxId = this.model.toolboxId;
            this.modelValue.str2 = this.model.id;
          }
          httpAction(httpurl,this.modelValue,method).then((res)=>{
            if(res.success){
              this.$message.success(res.message);
              this.$emit('ok');
            }else{
              this.$message.warning(res.message);
            }
          }).finally(() => {
            this.confirmLoading = false;
          })
        }else {
          this.$message.warning("工具箱或工具不可为空！")
        }

        // const that = this;
        // // 触发表单验证
        // this.$refs.form.validate(valid => {
        //   console.log("valid" + valid)
        //   if (valid) {
        //     that.confirmLoading = true;
        //     let httpurl = '';
        //     let method = '';
        //     if(!this.model.id){
        //       httpurl+=this.url.add;
        //       method = 'post';
        //     }else{
        //       httpurl+=this.url.edit;
        //        method = 'put';
        //     }
        //
        //   }
        //
        // })
      },
    }
  }
</script>